const state = {
  currentTheme: localStorage.getItem('theme') || 'light',
  themes: {
    light: {
      '--primary-color': '#409EFF',
      '--secondary-color': '#67C23A',
      '--text-color': '#303133',
      '--bg-color': '#f5f7fa',
      '--icon-color': '#606266'
    },
    dark: {
      '--primary-color': '#5a9cf8',
      '--secondary-color': '#85ce61',
      '--text-color': '#e6e6e6',
      '--bg-color': '#1a1a1a',
      '--icon-color': '#909399'
    },
    red: {
      '--primary-color': '#f56c6c',
      '--secondary-color': '#e6a23c',
      '--text-color': '#303133',
      '--bg-color': '#fef0f0',
      '--icon-color': '#f56c6c'
    }
  }
}

const mutations = {
  SET_THEME(state, themeName) {
    state.currentTheme = themeName
  }
}

const actions = {
  changeTheme({ commit, state }, themeName) {
    commit('SET_THEME', themeName)
    localStorage.setItem('theme', themeName)
    
    // 应用CSS变量
    const theme = state.themes[themeName]
    Object.keys(theme).forEach(key => {
      document.documentElement.style.setProperty(key, theme[key])
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}